<!--
货品类型
-->
<template>
  <div>
    <el-card shadow="always">
      <el-form :inline="true" :model="paraVo" ref="paraVo" class="demo-form-inline">
        <el-form-item label="货物类型名称:" prop="goodsName">
          <el-input v-model="paraVo.goodsName" placeholder="货物类型名称:"></el-input>
        </el-form-item>
        <el-form-item label="运输车型:" prop="truckTypeId">
          <el-select v-model="paraVo.truckTypeId" placeholder="运输车型:">
            <el-option
              v-for="arrdata in carList"
              :label="arrdata.name"
              :value="arrdata.id"
              :key="arrdata.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="el">搜索</el-button>
          <el-button @click="resetForm('paraVo')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card class="box-card">
      <el-button type="info" @click="showModel('新增货品类型',1)" icon="el-icon-edit">新增货品类型</el-button>
      <el-table
        v-loading="loading"
        :data="pageInfo.list"
        style="width: 100%">
        <el-table-column
          width="80"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (paraVo.pageNum - 1) * paraVo.pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          width="200"
          label="货物类型编号">
        </el-table-column>
        <el-table-column
          prop="gname"
          width="150"
          label="货物类型名称">
        </el-table-column>
        <el-table-column
          width="200"
          label="运输车型">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" v-if="scope.row.tname != null">
              {{ scope.row.tname }}
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.tname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          prop="defaultWeight"
          label="默认重量(千克)">
        </el-table-column>
        <el-table-column
          width="150"
          prop="defaultVolume"
          label="默认体积(方)">
        </el-table-column>
        <el-table-column
          width="150"
          prop="remark"
          label="说明">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="showModel('修改货品类型',2,scope.row.id)">修改</el-button>
            <el-button style="color: red" type="text" size="medium" @click="delGoods(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="paraVo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="paraVo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="closeModel"
      width="30%">
      <el-form ref="fromData" :model="goodsData" label-width="110px">
        <el-form-item label="货品名称" prop="name" :rules="[{ required: true, message: '请输入货品名称', trigger: 'blur' }]">
          <el-input v-model="goodsData.name"></el-input>
        </el-form-item>
        <el-form-item label="运输车型" prop="truckTypeIds">
          <el-select
            style="width: 100%"
            v-model="goodsData.truckTypeIds"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择运输车型" @change="refreshStatus">
            <el-option
              v-for="arrdata in carList"
              :label="arrdata.name"
              :value="arrdata.id"
              :key="arrdata.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认重量 (千克)" prop="defaultWeight">
          <el-input v-model="goodsData.defaultWeight" type="number"></el-input>
        </el-form-item>
        <el-form-item label="默认体积 (方)" prop="defaultVolume">
          <el-input v-model="goodsData.defaultVolume" type="number"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input v-model="goodsData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="clearModel">取 消</el-button>
        <el-button type="danger" @click="insertGoods" v-if="buttonStatus===1">确认</el-button>
        <el-button type="danger" @click="updateGoods" v-if="buttonStatus===2">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import goodsAPI from '../../../api/logisticsmanagement/networkmanagement/goodsAPI'

export default {
  data() {
    return {
      // 加载条
      loading: false,
      httpurl: 'http://localhost:12300',
      paraVo: {
        "goodsName": null,
        "truckTypeId": null,
        "pageNum": 1,
        "pageSize": 5
      },
      pageInfo: {},
      carList: [],
      title: "",
      dialogVisible: false,
      buttonStatus: 0,
      goodsData: {
        "name": null,
        "defaultWeight": null,
        "defaultVolume": null,
        "remark": null,
        "status": 1,
        "truckTypeIds": []
      }
    }
  },
  methods: {
    // 修改赋值select无法选中
    refreshStatus() {
      this.$forceUpdate()
    },
    // 初始化查询
    el() {
      this.loading = true
      goodsAPI.getGoodsData(this.paraVo).then(({data}) => {
        this.pageInfo = data.data
        this.loading = false
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 设置页条数
    setSize(num) {
      this.paraVo.pageSize = num
      this.el()
    },
    // 设置当前页
    setPage(num) {
      this.paraVo.pageNum = num
      this.el()
    },
    // 删除
    delGoods(num) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsAPI.deleGoodsData(num).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.el()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 显示模态框
    showModel(title, status, updateId) {
      this.title = title
      this.buttonStatus = status
      if (status === 1) {
        this.dialogVisible = true
      }
      if (status === 2) {
        // 查询用户的修改的信息
        this.$store.commit("startAnimation", true);
        goodsAPI.selUpdataGoodsData(updateId).then(({data}) => {
          this.dialogVisible = true
          this.$store.commit("startAnimation", false);
          this.goodsData = data.data.pdGoodsType
          if (data.data.pdTruckType.length > 0) {
            let truckIds = [];
            for (let index in data.data.pdTruckType) {
              truckIds[truckIds.length] = data.data.pdTruckType[index].id
            }
            this.goodsData.truckTypeIds = truckIds
          }
        })
      }
    },
    // 关闭模态框
    closeModel() {
      this.$confirm('确认关闭？').then(() => {
        this.clearModel()
      })
    },
    // 清空模态框
    clearModel() {
      this.title = null
      this.dialogVisible = false
      this.buttonStatus = 0
      // 防止点了修改再点添加会出现id的问题
      this.goodsData.id = null
      this.goodsData = {
        name: null,
        defaultWeight: null,
        defaultVolume: null,
        remark: null,
        status: 1,
        truckTypeIds: []
      }
    },
    // 添加
    insertGoods() {
      if (this.goodsData.name == '' || this.goodsData.name == undefined) {
        this.$message({
          message: '输入货品名称',
          type: 'warning'
        });
        return
      }
      this.$store.commit("startAnimation", true);
      goodsAPI.insertGoodsData(this.goodsData).then(({data}) => {
        if (data.code === 200) {
          this.$message({
            message: data.message,
            type: 'success'
          });
          this.$store.commit("startAnimation", false);
          this.el()
          this.clearModel()
        }
      })
    },
    // 修改
    updateGoods() {
      if (this.goodsData.name == '' || this.goodsData.name == undefined) {
        this.$message({
          message: '输入货品名称',
          type: 'warning'
        });
        return
      }
      this.$store.commit("startAnimation", true);
      goodsAPI.updateGoodsData(this.goodsData).then(({data}) => {
        if (data.code === 200) {
          this.$message({
            message: data.message,
            type: 'success'
          });
          this.$store.commit("startAnimation", false);
          this.el()
          this.clearModel()
        }
      })
    }
  },
  created() {
    // 初始化数据
    this.el()
    goodsAPI.getTruck().then(({data}) => {
      this.carList = data.data
    })
  }
}
</script>

<style></style>
